<template>
	<view style="display: flex;gap: 10px;align-items: center;padding: 10px 0;">
		<image :src="data.path" mode="widthFix" style="width: 64px;height: 86px;border-radius: 5px;" />
		<view class="">
			<text class="ellipsis">{{data.name}}</text>
			<progress :percent="percent" show-info style="width: 420px;"></progress>
		</view>
		<icon v-if="finish" class="finish" type="success" size="24" color="#4cd964"></icon>
	</view>
</template>

<script>
	import COS from 'cos-js-sdk-v5'
	export default {
		data() {
			return {
				percent: 0,
				finish: false
			}
		},
		mounted() {
			this.$emit('enentIndex', this);
		},
		props: {
			data: {
				type: Object,
				default: null
			},
			host: {
				type: String,
				default: 'https://api.yuejunxi.com'
			},
			token: {
				type: String,
				default: ''
			},
			path: {
				type: String,
				default: 'product'
			},
		},
		methods: {
			/**
			 * 上传图片
			 * @param {Object} picFile
			 */
			async hasPost() {
				let picFile = this.data;

				let cosToken = await this.hasCosToken(this.host, this.token).catch(e => {
					this.$emit('error', err)
				})
				console.log("请求密钥", cosToken);

				let cosRequest = await this.hasCosRequest(cosToken, picFile, this.path).catch(e => {
					this.$emit('error', err)
				})
				console.log("上传对象", cosRequest);

				this.$emit('finish', cosRequest)
			},
			/**
			 * 上传Cos对象
			 * @param {Object} token
			 * @param {Object} file
			 * @param {String} path
			 */
			hasCosRequest(token, file, path) {
				return new Promise((resolve, reject) => {
					let that = this;
					let fileName = 'media/' + path + '/' + token.startTime + '_' + file.name;
					let cos = new COS({
						SecretId: token.credentials.tmpSecretId,
						SecretKey: token.credentials.tmpSecretKey,
						SecurityToken: token.credentials.sessionToken,
						StartTime: token.startTime,
						ExpiredTime: token.expiredTime
					});
					let response = cos.uploadFile({
						Bucket: token.account.bucket,
						Region: token.account.region,
						Key: fileName,
						Body: file,
						SliceSize: 1024 * 1024 * 5, // 大于1mb才进行分块上传			
						onProgress: (progressData) => {
							console.log(progressData.percent);
							that.percent = progressData.percent * 100
						}
					}, (err, data) => {
						if (err) {
							reject(err)
						} else {
							let logo = '/media' + data.Location.split('/media')[1]
							that.finish = true
							that.url = logo
							resolve(logo)
						}
					})
				})
			},
			/**
			 * 加载Cos会话密钥
			 * @param {String} host
			 * @param {String} token
			 */
			hasCosToken(host, token) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: host + '/api/cosSt/',
						method: 'POST',
						header: {
							'content-type': 'application/json',
							'authorization': token
						},
						success(res) {
							if (res.data.rescode === 200) {
								resolve(res.data.resmsg);
							} else {
								reject(res.data.rescode)
							}
						},
						fail(err) {
							reject(err)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ellipsis {
		width: 400px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>